<template>
  <div class="container" @click="onclickitem">
     <image src="http://gtms03.alicdn.com/tps/i3/TB1mdsiMpXXXXXpXXXXNw4JIXXX-640-4.png" class="top-line"></image>
    <image :src="icon" class="tab-icon"></image>
    <text :style="{ color: titleColor }" class="tab-text">{{title}}</text> 
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100;
}

.top-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2;
}

.tab-icon {
  margin-top: 5;
  width: 49;
  height: 49
}

.tab-text {
  margin-top: 5;
  text-align: center;
  font-size: 20;
}
</style>

<script>
export default {
  props: {
    index: { default: 0 },
    title: { default: '' },
    titleColor: { default: '#000000' },
    icon: { default: '' },
    backgroundColor: { default: '#ffffff' }
  },
  methods: {
    onclickitem (e) {
      var params = {
        index: this.index
      };
      this.$emit('tabItemOnClick', params);
    }
  }
}
</script>